<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 顶部tab -->
    <div class="tab-header" th:fragment="top-tab">
        <div class="inner">
            <div class="pull-right">
                <a th:href="|@{/user/getLoginPage}|" th:if="${#request.getSession().getAttribute('user')==null}"><span class="cr">登录</span></a>
                <div class="pull-left" th:if="${#request.getSession().getAttribute('user')!=null}">嗨,<span class="cr" th:text="${#request.getSession().getAttribute('nickName')}"></span></div>
                <a th:href="|@{/user/getLoginPage}?p=register|" th:if="${#request.getSession().getAttribute('user')==null}">注册</a>
                <a th:href="|@{/user/logout}|" th:if="${#request.getSession().getAttribute('user')!=null}">退出</a>
                <a th:href="@{/getUserCenterPage}">个人中心</a>
                <a th:href="@{/getOrderCenterPage}">订单中心</a>
                <a th:href="@{/getServiceCenterPage}">服务中心</a>
                <a th:href="@{/cart/getCartListPage}">购物车</a>
            </div>
        </div>
    </div>
    <!-- 搜索栏 -->
    <div class="top-search" th:fragment="search-bar">
        <div class="inner">
            <a class="logo" th:href="@{/}"><img th:src="@{/images/icons/whlogo.png}" alt="旺和" class="cover"></a>
            <div class="search-box">
                <form class="input-group">
                    <input th:placeholder="${searchName==null}?'搜索商品':''" type="text" id="search_val" th:value="${searchName==null}?'':${searchName}">
                    <span class="input-group-btn">
                            <button type="button" id="search_btn">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </span>
                </form>
                <p class="help-block text-nowrap">
                    <a th:each="recommend:${recommends}" th:href="@{/product/getProductDetailPage(id=${recommend.id})}" th:text="${recommend.getName().substring(0,T(java.lang.Math).min(15,recommend.getName().length()))}+' '"></a>
                </p>
            </div>
            <div class="cart-box">
                <a th:href="@{/cart/getCartListPage}" class="cart-but" id="cart_num">
                    <i class="iconfont icon-shopcart cr fz16"></i> 购物车 0 件
                </a>
            </div>
        </div>
        <script th:inline="javascript">
            var user = [[${session.user}]];
            var search_btn=$('#search_btn');
            search_btn.click(function (){
                var search_val=$('#search_val').val();
                console.log(search_val);
                location.href= [[${#request.getContextPath()}]]+'/getSearchProductPage?name='+search_val;
            })
            if (user == null) {
                //console.log("User is not logged in");
            } else {
                //console.log("User is logged in:",user);
                $.post(
                    [[${#request.getContextPath()}]]+'/cart/queryCount',
                    function(result) {
                        //console.log(result);
                        $("#cart_num").empty();
                        $("#cart_num").append('<i class="iconfont icon-shopcart cr fz16"></i> 购物车 '+result.num+' 件')
                    },
                    'json'
                );
            }
        </script>
    </div>
    <!-- 右侧菜单 -->
    <div class="right-nav" th:fragment="right-menu" style="width: 0px">
        <ul class="r-with-gotop">
            <li class="r-toolbar-item">
                <a th:href="@{/getUserCenterPage}" class="r-item-hd">
                    <i class="iconfont icon-user"></i>
                    <div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
                </a>
            </li>
            <li class="r-toolbar-item">
                <a th:href="@{/cart/getCartListPage}" class="r-item-hd">
                    <i class="iconfont icon-cart" ></i>
                    <div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
                </a>
            </li>
            <li class="r-toolbar-item to-top">
                <i class="iconfont icon-top"></i>
                <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
            </li>
        </ul>
    </div>
    <!-- 底部信息 -->
    <div class="footer" th:fragment="bottom-bar">
        <div class="footer-tags">
            <div class="tags-box inner">
                <div class="tag-div">
                    <img th:src="@{/images/icons/footer_1.gif}" alt="厂家直供">
                </div>
                <div class="tag-div">
                    <img th:src="@{/images/icons/footer_2.gif}" alt="一件代发">
                </div>
                <div class="tag-div">
                    <img th:src="@{/images/icons/footer_3.gif}" alt="美工活动支持">
                </div>
                <div class="tag-div">
                    <img th:src="@{/images/icons/footer_4.gif}" alt="信誉认证">
                </div>
            </div>
        </div>
    </div>
</body>
</html>